<template>
    <view :style="themeColor()">

        <loading-page :loading="diy.getLoading()"></loading-page>

        <view v-show="!diy.getLoading()">

            <!-- 自定义模板渲染 -->
            <view class="diy-template-wrap bg-index" :style="diy.pageStyle()">

                <diy-group ref="diyGroupRef" :data="diy.data" />

            </view>

        </view>

        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->

        <!-- 定制弹框 -->
        <uv-popup ref="customModalRef" mode="center" round="20" :safe-area-inset-bottom="false" @maskClick="closeModal">
        <view class="custom-modal">
            <up-icon class="modal-close" name="close-circle-fill" color="#f00" size="56rpx" @click="closeModal" />
            <view class="modal-title">我要定制</view>
            <view class="modal-desc">您是否通过现有酒体（大师散酒/名酒同味/大师配方）、亲手调酒、专家设计筛选出满意酒体？</view>
            <view class="modal-btn-row">
            <button class="modal-btn" @click="customWine(1)">已有酒体</button>
            <button class="modal-btn" @click="customWine(2)">暂无酒体</button>
            </view>
        </view>
        </uv-popup>

        <!-- 无酒体弹框 -->
        <uv-popup ref="nomeWineModalRef" mode="center" round="20" :safe-area-inset-bottom="false" @maskClick="closeNoWater">
        <view class="custom-modal">
            <up-icon class="modal-close" name="close-circle-fill" color="#f00" size="56rpx" @click="closeNoWater" />
            <!-- <view class="modal-title">暂无酒体</view> -->
            <view class="modal-desc">
            请选择酒体获取方式
            </view>
            <view class="modal-btn-row">
            <button class="modal-btn" @click="onBlend(1)">亲手调酒</button>
            </view>
            <view class="modal-btn-row">
            <button class="modal-btn" @click="onBlend(2)">专家设计</button>
            </view>
        </view>
        </uv-popup>
    </view>
</template>

<script setup lang="ts">
import { ref, nextTick, computed } from 'vue';
import { useDiy } from '@/hooks/useDiy'
import { redirect } from '@/utils/common';
import diyGroup from '@/addon/components/diy/group/index.vue'
import useMemberStore from '@/stores/member'
import { useLogin } from '@/hooks/useLogin'
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

uni.hideTabBar() // 隐藏tabbar

const diy = useDiy({
    name: 'DIY_INDEX'
})

const diyGroupRef = ref<any>(null)

const wxPrivacyPopupRef: any = ref(null)

const customModalRef = ref<any>(null); // 定制弹框
const nomeWineModalRef = ref<any>(null); // "无酒体"弹框

// 监听页面加载
diy.onLoad();

// 监听页面显示
diy.onShow((data: any) => {
    if (data.value) {
        // uni.setNavigationBarTitle({
        // 	title: diyData.title
        // })
    } else if (data.page) {
        // 跳转到设置的启动页
        redirect({ url: data.page, mode: 'reLaunch' })
    }
    diyGroupRef.value?.refresh();
    // #ifdef MP
    nextTick(() => {
        if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
    })
    // #endif
});

// 监听页面隐藏
diy.onHide();

// 监听页面卸载
diy.onUnload();

// 监听滚动事件
diy.onPageScroll()

// 显示酒体弹框
const diyClick = (e: any) => {
    if (["GraphicNav", "RubikCube"].includes(e.module) && e.url == 'wine') {
        customModalRef.value.open();
    }
}

// 关闭定制弹框
const closeModal = () => {
    customModalRef.value.close();
}

  // 选择酒体
const customWine = (val: number) => {
    closeModal()
    if (val == 1) {
      // 已有酒体
    if (!userInfo.value) {
        useLogin().setLoginBack({ url: '/addon/shop/pages/index' })
        return
    }
        redirect({ url: '/addon/shop/pages/select/water' })
    } else {
    // 无酒体
        nomeWineModalRef.value.open();
    }
}

// 关闭无酒体弹框
const closeNoWater = () => {
    nomeWineModalRef.value.close();
}

// 选择调酒方式
const onBlend = (val: number) => {
    closeNoWater();
    if (val == 1) {
        // 自调酒体
        redirect({ url: '/addon/shop/pages/select/expertAdvice' })
    } else {
        // 大师调
        redirect({ url: '/app/pages/index/diy?id=5' })
    }
}
</script>
<style lang="scss" scoped>
@import '@/styles/diy.scss';
</style>
<style lang="scss">
.diy-template-wrap {
    /* #ifdef MP */
    .child-diy-template-wrap {
        ::v-deep .diy-group {
            > .draggable-element.top-fixed-diy {
                display: block !important;
            }
        }
    }

    /* #endif */
}

.custom-modal {
    width: 600rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 48rpx 32rpx 36rpx 32rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-title {
    width: 100%;
    font-size: 38rpx;
    font-weight: bold;
    color: #222;
    margin-bottom: 10rpx;
}

.modal-desc {
    width: 100%;
    font-size: 28rpx;
    color: #444;
    margin-bottom: 38rpx;
    text-align: center;
    line-height: 1.6;
}

.modal-btn-row {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 18rpx;
    gap: 20rpx;
    &:last-child {
        margin-bottom: 0;
    }
}

.modal-btn {
    flex: 1;
    font-size: 30rpx;
    border-radius: 16rpx;
    border: 2rpx solid #ff4d4f;
    background: #fff;
    color: #ff4d4f;
    padding: 10rpx 0;
    font-weight: bold;
    transition: all 0.2s;
    &:active {
        background: #ffeded;
    }
}

.custom-modal .u-icon {
    position: absolute;
    right: 28rpx;
    top: 14rpx;
    font-size: 40rpx;
    color: #ff4d4f;
    cursor: pointer;
}
</style>
